<template>
  <div class="app-container">
    <div class="table-box">
      <!-- 搜索区 开始 -->
      <div class="search-box">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px">
          <el-row>
            <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
              <el-row>
                <!-- 表单元素 开始 -->
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                  <el-form-item :label="$t('infoModel.name')" prop="name">
                    <el-input v-model="form.name" :placeholder="$t('infoModel.name_tips')" clearable />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                  <el-form-item :label="$t('common.table_name')" prop="table_name">
                    <el-input
                      v-model="form.table_name"
                      :placeholder="$t('infoModel.table_name_tips')"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <!-- 表单元素 结束 -->
              </el-row>
            </el-col>
            <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4" class="search-btn">
              <el-button v-waves type="primary" icon="el-icon-plus" :loading="submitLoading" :disabled="!checkPermission(['admin.infoModel.store'])" @click="onSubmit">{{ $t('common.create') }}</el-button>
              <el-button icon="el-icon-refresh" @click="handleResetForm">{{ $t('common.reset') }}</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 搜索区 结束 -->
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        max-height="540"
        @sort-change="sortChange"
      >
        <el-table-column
          :label="$t('common.id')"
          prop="id"
          sortable="custom"
          align="center"
          width="80"
          :class-name="getSortClass('id')"
        >
          <template slot-scope="{ row }">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('infoModel.name')" align="center">
          <template slot-scope="{ row }"> {{ row.name }} </template>
        </el-table-column>
        <el-table-column :label="$t('common.table_name')" align="center">
          <template slot-scope="{ row }"> {{ row.table_name }} </template>
        </el-table-column>
        <el-table-column :label="$t('common.user')" align="center">
          <template slot-scope="{ row }">
            {{ row.created_user_name }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.created_at')"
          width="200px"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.created_at }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能 开始 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
      <!-- 分页功能 结束 -->
    </div>
  </div>
</template>

<script>
import { index, store } from '@/api/info-model'
import waves from '@/directive/waves' // waves directive
// import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import checkPermission from '@/utils/permission'

export default {
  name: 'InfoModelIndex',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      submitLoading: false,
      form: {
        name: '',
        table_name: ''
      },
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        sort: '-id'
      },
      // 路由参数
      routerParams: {},
      rules: {
        name: [{ required: true, message: this.$t('infoModel.name_tips'), trigger: 'blur' }],
        table_name: [{ required: true, message: this.$t('infoModel.table_name_tips'), trigger: 'blur' }]
      }
    }
  },
  created() {
    this.routerParams = this.$route.params
    this.getList()
  },
  methods: {
    checkPermission,
    async getList() {
      this.listLoading = true
      await index(this.listQuery).then((response) => {
        this.list = response.data.items
        this.total = response.data.meta.total
        this.listLoading = false
      }).catch(() => {
        this.closeBack()
      })
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.submitLoading = true
          store(this.form).then((response) => {
            this.submitLoading = false
            this.$message.success(response.message)
            this.handleResetForm()
            this.getList()
          }).catch(() => {
            this.submitLoading = false
          })
        } else {
          this.$message.error(this.$t('common.pleaseFillRequired'))
          return false
        }
      })
    },
    handleResetForm() {
      this.$refs['form'].resetFields()
    },
    sortChange(data) {
      const { prop, order } = data
      if (order === 'ascending') {
        this.listQuery.sort = '+' + prop
      } else if (order === 'descending') {
        this.listQuery.sort = '-' + prop
      } else {
        this.listQuery.sort = ''
      }
      this.listQuery.sort && this.handleFilter()
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      if (sort === `+${key}`) {
        return 'ascending'
      } else if (sort === `-${key}`) {
        return 'descending'
      } else {
        return ''
      }
    }
  }
}
</script>
<style scoped  lang="scss" >
</style>
